<template>
  <div>
    <PerfectTableComponent
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :removeQueryField="removeQueryField"
      :clearQuery="clearQuery"
      v-model:query="query"
      :queryFormHeaders="queryFormHeaders"
      title="管理员注册日志"
      ref="tableRef"
      :table="table"
      :tableColumns="tableColumns"
      :baseUrl="urls.API_URL_BACKSTAGE_USERREGLOG_MANAGE"
      :showDeleteButton="false"
      :showAddNewButton="false"
      :showEditButton="false"
      :showOperatorColumn="false"
      :allowEditTableCell="false"
    >
      <!--账户姓名-->
      <template #table_column_username="scope: any">
        {{ scope.row.user != null ? scope.row.user.username : '' }}
      </template>
      <template #table_column_nickName="scope: any">
        {{ scope.row.user != null ? scope.row.user.nickName : '' }}
      </template>
    </PerfectTableComponent>
  </div>
</template>

<script setup lang="ts">
import PerfectTableComponent from '@/components/base/table/PerfectTableComponent.vue';
import useTableList from '@/api/hooks/useTableList';
import urls from '@/api/request/urls';
import type { FormHeader, TableColumn } from '@/types/interface/base_interface';
import { onMounted, provide, ref } from 'vue';
// 表格工具必备参数
const { table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage } = useTableList(
  urls.API_URL_BACKSTAGE_USERREGLOG_MANAGE
);

// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

// 表格插件ref对象
const tableRef = ref();
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([]);
const queryFormHeaders = ref<FormHeader[]>([
  // 查询表单
  {
    prop: 'ip',
    label: 'ip地址'
  }
]);
//供一些异步交互的在这里初始化
onMounted(async () => {
  tableColumns.value = [
    {
      label: '用户名',
      prop: 'username',
      width: 150,
      type: 'custom'
    },
    {
      label: '姓名',
      prop: 'nickName',
      width: 150,
      type: 'custom'
    },
    {
      label: 'IP地址',
      prop: 'ip',
      width: 150
    },
    {
      label: '注册时间',
      prop: 'regTime'
    }
  ];
});
</script>

<style scoped></style>
